<template>
	<view class="container">
		<view class="header-wrap">
			<view class="location">
				<uni-icons type="fire-filled" size="24" color="#fff" />速援安消通
			</view>
		</view>
		<view class="banner">
			<swiper class="swiper" circular indicator-dots autoplay> 
				<swiper-item>
					<image src="https://suyuan-axt.tianxunwang.com:10098/assets/suyuan-axt/portal/banner-1.png" mode="" />
				</swiper-item>
				<swiper-item>
                    <image src="https://suyuan-axt.tianxunwang.com:10098/assets/suyuan-axt/portal/banner-2.png" mode="" />
				</swiper-item>
			</swiper>
		</view>
		<!-- <view style="height: 260rpx;margin: 20rpx;">
			<image src="https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/banner/banner-7.png"
				:draggable="false" mode="scaleToFill" class="swiper-img"></image>
		</view> -->
		<view class="cate-wrap">
			<view class="cate-head">
				<image src="https://suyuan-axt.tianxunwang.com:10098/assets/suyuan-axt/portal/diamond.png" mode="" style="width: 88rpx;height: 88rpx;margin-right: 20rpx;">
				</image>
				<view class="label-wrap">
					<view class="title">品质区</view>
					<view class="desc">优价正品</view>
				</view>
				<!-- <view class="more">
					<uni-icons type="right" size="24"></uni-icons>
				</view> -->
			</view>
			<view class="cate-content">
				<view class="scoll-wrapper">
					<view class="items" v-for="(item, index) in qualityList" :key="'3-'+index" @click="goProductDetails(item)">
						<image :src="CONSTANT_URL.TY+item.coverImageUrl" :draggable="false" mode="scaleToFill"></image>
						<view class="title clamp">{{ item.name }}</view>
						<view class="price">￥{{ item.startingPrice }}</view>
					</view>
				</view>
			</view>
		</view>
        
		<view class="hot-wrap">
			<view class="hot-header">
                <view class="iconfont icon-huo my-icon"></view>
                <view class="">品牌甄选</view>
			</view>
        </view>
        <uni-list class="products-list" :border="true">
            <uni-list-item
                v-for="(item, index) in productsList"
                :key="'1-'+index"
                title=""
                rightText=""
                note=""
                thumb=""
                thumbSize="lg"
            >
                <template v-slot:header>
                </template>
                <template v-slot:body>
                    <view 
                        class="slot-1-box"
                        @click="goProductDetails(item)"
                    >
                        <image
                            :src="CONSTANT_URL.TY+item.coverImageUrl"
                            :draggable="false"
                            mode="scaleToFill"
                            class="slot-1-img-1"
                        ></image>
                        <view class="slot-1-text-1">
                            <!-- <text class="slot-1-text-1-left">积分兑换</text> -->
                            <text class="slot-1-text-1-right">{{ item.name }}</text>
                        </view>
                        <view class="slot-1-text-2">
                            <view class="slot-1-text-2-money">￥{{ item.startingPrice }}</view>
                            <view class="slot-1-text-2-box">
                                <!-- <view class="slot-1-text-2-box-1">已售{{ item.zsgm_ex4 }}件</view> -->
                                <!-- <view class="slot-1-text-2-box-2">产地：{{ item.zsgm_ex4 }}件</view> -->
                            </view>
                        </view>
                        <view 
                            v-if="item.zsgm_ex12"
                            class="slot-1-text-3"
                        >
                            产地：{{ item.zsgm_ex12 }}
                        </view>
                    </view>
                </template>
            </uni-list-item>
        </uni-list>
        <view style="margin: 20rpx;">
        	<image src="https://suyuan-axt.tianxunwang.com:10098/assets/suyuan-axt/portal/banner-3.png"
        		:draggable="false" mode="widthFix" class="publicity-img"></image>
        </view>
        <view class="hot-wrap">
        	<view class="hot-header">
        		<view class="iconfont icon-pinpaiguanli my-icon"></view>
        		<view class="">品牌类别</view>
        	</view>
        </view>
        <uni-list class="categories-list" :border="true">
            <uni-list-item
                v-for="(item, index) in categoriesList1"
                :key="'2-'+index"
                title=""
                rightText=""
                note=""
                thumb=""
                thumbSize="lg"
            >
                <template v-slot:header>
                </template>
                <template v-slot:body>
                    <view 
                        class="slot-2-box"
                        @click="goMallWithCateGories(item,index)"
                    >
                    <!-- :src="item.coverImageUrl ? CONSTANT_URL.TY+item.coverImageUrl : 'https://imgservice.suning.cn/uimg1/b2c/image/zXdE_Dx2qjlblzx1PCe8ZA.jpg_800w_800h_4e'" -->
                        <image
                            :src="CONSTANT_URL.TY+item.coverImageUrl"
                            :draggable="false"
                            mode="scaleToFill"
                            class="slot-2-img-1"
                        ></image>
                        <view class="slot-2-text-1">
                            <!-- <text class="slot-2-text-1-left">积分兑换</text> -->
                            <text class="slot-2-text-1-right">{{ item.name }}</text>
                        </view>
                        <!-- <view class="slot-2-text-2">
                            <view class="slot-2-text-2-money">￥{{ item.startingPrice }}</view>
                            <view class="slot-2-text-2-box">
                                <view class="slot-2-text-2-box-1">已售{{ item.zsgm_ex4 }}件</view>
                                <view class="slot-2-text-2-box-2">产地：{{ item.zsgm_ex4 }}件</view>
                            </view>
                        </view>
                        <view 
                            v-if="item.zsgm_ex12"
                            class="slot-2-text-3"
                        >
                            产地：{{ item.zsgm_ex12 }}
                        </view> -->
                    </view>
                </template>
            </uni-list-item>
        </uni-list>
	</view>
</template>

<script lang="ts" setup>
	import { onLoad, onShow, onHide, onReady, onUnload, onTabItemTap, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
	import { markRaw, onBeforeUnmount, reactive, ref, onMounted, watchEffect, watch } from 'vue'
	import type { Ref, Raw } from 'vue'
    import { getProductsApi,getCategoriesApi } from '@/apis'
    import { CONSTANT_URL } from '@/apis/constant.ts'
	onLoad(async(val : any) => {
		console.log(val)
		if (val.invitationCode) {
			uni.setStorageSync('invitationCode', val.invitationCode)
			console.log('invitationCode: ' + uni.getStorageSync('invitationCode'))
		}
        let res1: any = await getCategoriesApi()
        categoriesList1.value = res1.data
        let res4: any = await getCategoriesApi({
            parentId: res1.data[0].id
        })
        getProductsApi({
            categoryId: res4.data[2].id,
            name: '', //商品关键字
            pageNo: 1, //第几页,默认从1开始
            pageSize: 4, //每页几条
        }).then((res2: any) => {
           productsList.value = res2.data.content
        })
        getProductsApi({
            categoryId: res4.data[3].id,
            name: '', //商品关键字
            pageNo: 1, //第几页,默认从1开始
            pageSize: 4, //每页几条
        }).then((res3: any) => {
           qualityList.value = res3.data.content
        })
	})
	onShow(() => {

	})
	onShareAppMessage((res) => {
		return {
			title: '速援安消通',
			path: '/pages/index/index?invitationCode=' + (uni.getStorageSync('myInvitationCode') ? uni.getStorageSync('myInvitationCode') : '')
		}
	})
    onShareTimeline(() => {
        return {
            // title: '速援安消通', //当前小程序名称
            query: 'invitationCode=' + (uni.getStorageSync('myInvitationCode') ? uni.getStorageSync('myInvitationCode') : '')
        }
    })
    const productsList:Ref<any> = ref([
        // {
        //     name: '12瓶装易捷水', //商品名称
        //     startingPrice: 120, //售价积分
        //     zsgm_ex4: 62, //销售量
        //     zsgm_id: 100,
        //     coverImageUrl: 'http://oss3.smartyoke.com/putaway/23e338cee2cb4428b7a29f45e4ff0268.jpg', //商品图片
        //     zsgm_ex3: 0, //库存数量
        //     zsgm_ex5: '商品简介', //商品简介
        //     zsgm_ex7: '商品类型名称', //商品类型名称
        //     zsgm_ex8: '已上架', //是否上架:未上架 ,已上架
        //     zsgm_ex9: '未审核', //审核状态:未审核 ,已审核
        //     zsgm_create_time: '', //创建时间
        //     zsgm_dj_ex3: 0, //冻结数量
        // },
    ])
    const categoriesList1:Ref<any> = ref([])
    const qualityList:Ref<any> = ref([])
    const goProductDetails = (val: any) => {
        uni.navigateTo({
            url: '/pages/productDetails/productDetails?id=' + val.id
        })
    }
    const goMallWithCateGories = (val: any,index:number) => {
        console.log(val)
        uni.setStorageSync('segmentedCurrent1', index)
        console.log(uni.getStorageSync('segmentedCurrent1'))
        uni.switchTab({
            url: '/pages/mall/mall'
        })
    }
    
</script>
<style lang="scss" scoped>
	.container {
		width: 100%;
		background-color: #f5f5f5;
	}

	.header-wrap {
		height: 260rpx;
		padding: 20rpx;
		background: linear-gradient(135deg, #CC2C3B, #e74c3c);
		color: #fff;
	}

	.location {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-weight: bold;
	}

	.banner {
		margin: 0px 20rpx;
		margin-top: -180rpx;

		.swiper {
			height: 350rpx;
		}

		image {
			display: block;
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}
	}

	.swiper-img {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}
    .publicity-img {
    	width: 100%;
    	border-radius: 20rpx;
    }

	.hot-wrap {
		padding: 20rpx 20rpx;
		margin: 10rpx 0;
		background: white;
        box-sizing: border-box;
		.hot-header {
			display: flex;
			justify-content: center;
			align-items: center;
            .my-icon {
                margin-right: 10rpx;
                font-size: 50rpx;
            }
			image {
				display: block;
				width: 44rpx;
				height: 54rpx;
				margin-right: 10rpx;
			}

			font-weight: 600;
			font-size: 32rpx;
			color: red;
		}
	}
   
    :deep(.categories-list .uni-list) {
        // margin-top: 10rpx;
        background-color: rgba(0, 0, 0, 0) !important;
        flex-direction: row;
        flex-wrap: wrap;
        .uni-list-item {
            background-color: rgba(0, 0, 0, 0) !important;
            width: 33.333vw;
            .uni-list-item__container {
                padding: 5rpx 5rpx !important;
            }
        }
        // 列表标题title,note
        .uni-list-item__content-title {
            font-size: 30rpx;
        }
        .uni-list-item__content-note {
            font-size: 30rpx;
        }
        .uni-list--border:after {
            background-color: rgba(0,0,0,0) !important;
        }
        /* list样式修改 */
        .slot-2-box {
            // margin-top: 10rpx;
            flex: 1;
            display: flex;
            flex-direction: column;
            background: rgb(255, 255, 255);
            box-sizing: border-box;
            border-radius: 24rpx;
            padding: 20rpx;
            .slot-2-img-1 {
                width: 100%;
                height: 200rpx;
                box-sizing: border-box;
                border-radius: 24rpx;
            }
            .slot-2-text-1 {
                // display: flex;
                // align-items: center;
                // height: 100rpx;
                padding-top: 10rpx;
                overflow: hidden;
                display: flex;
                justify-content: center;
                .slot-2-text-1-left {
                    background: #f2403c;
                    box-sizing: border-box;
                    padding: 5rpx;
                    border-radius: 10rpx;
                    font-size: 24rpx;
                    color: #fff;
                    
                }
                .slot-2-text-1-right {
                    box-sizing: border-box;
                    // padding-left: 20rpx;
                    font-size: 28rpx;
                    line-height: 48rpx;
                    font-weight: bold;
                    text-align: center;
                }
            }
            .slot-2-text-2 {
                display: flex;
                align-items: center;
                justify-content: space-between;
                .slot-2-text-2-money {
                    color: #f2403c;
                    box-sizing: border-box;
                    padding: 5rpx;
                }
                .slot-2-text-2-box {
                    box-sizing: border-box;
                    // padding-left: 20rpx;
                    color: #b5b5b5;
                    font-size: 20rpx;
                    .slot-2-text-2-box-1 {
                        
                    }
                    .slot-2-text-2-box-2 {
                        
                    }
                }
            }
            .slot-2-text-3 {
                box-sizing: border-box;
                color: #b5b5b5;
                font-size: 20rpx;
                text-align: right;
                height: 20rpx;
            }
        }
    }
    :deep(.products-list .uni-list) {
        // margin-top: 10rpx;
        background-color: rgba(0, 0, 0, 0) !important;
        flex-direction: row;
        flex-wrap: wrap;
        .uni-list-item {
            background-color: rgba(0, 0, 0, 0) !important;
            width: 50vw;
            .uni-list-item__container {
                padding: 5rpx 5rpx !important;
            }
        }
        // 列表标题title,note
        .uni-list-item__content-title {
            font-size: 30rpx;
        }
        .uni-list-item__content-note {
            font-size: 30rpx;
        }
        .uni-list--border:after {
            background-color: rgba(0,0,0,0) !important;
        }
        /* list样式修改 */
        .slot-1-box {
            // margin-top: 10rpx;
            flex: 1;
            display: flex;
            flex-direction: column;
            background: rgb(255, 255, 255);
            box-sizing: border-box;
            border-radius: 24rpx;
            padding: 20rpx;
            .slot-1-img-1 {
                width: 100%;
                height: 300rpx;
                box-sizing: border-box;
                border-radius: 24rpx;
            }
            .slot-1-text-1 {
                // display: flex;
                // align-items: center;
                height: 100rpx;
                padding-top: 10rpx;
                overflow: hidden;
                .slot-1-text-1-left {
                    background: #f2403c;
                    box-sizing: border-box;
                    padding: 5rpx;
                    border-radius: 10rpx;
                    font-size: 24rpx;
                    color: #fff;
                }
                .slot-1-text-1-right {
                    box-sizing: border-box;
                    // padding-left: 20rpx;
                    font-size: 28rpx;
                    line-height: 48rpx;
                }
            }
            .slot-1-text-2 {
                display: flex;
                align-items: center;
                justify-content: space-between;
                .slot-1-text-2-money {
                    color: #f2403c;
                    box-sizing: border-box;
                    padding: 5rpx;
                }
                .slot-1-text-2-box {
                    box-sizing: border-box;
                    // padding-left: 20rpx;
                    color: #b5b5b5;
                    font-size: 20rpx;
                    .slot-1-text-2-box-1 {
                        
                    }
                    .slot-1-text-2-box-2 {
                        
                    }
                }
            }
            .slot-1-text-3 {
                box-sizing: border-box;
                color: #b5b5b5;
                font-size: 20rpx;
                text-align: right;
                height: 20rpx;
            }
        }
    }
    
    // :deep(.uni-list) {
    //     // margin-top: 10rpx;
    //     background-color: rgba(0, 0, 0, 0) !important;
    //     flex-direction: row;
    //     flex-wrap: wrap;
    //     .uni-list-item {
    //         background-color: rgba(0, 0, 0, 0) !important;
    //         width: 50vw;
    //         .uni-list-item__container {
    //             padding: 5rpx 5rpx !important;
    //         }
    //     }
    // }
    // 列表标题title,note
    // :deep(.uni-list-item__content-title) {
    //     font-size: 30rpx;
    // }
    // :deep(.uni-list-item__content-note) {
    //     font-size: 30rpx;
    // }
    // :deep(.uni-list--border:after) {
    //     background-color: rgba(0,0,0,0) !important;
    // }

	.cate-wrap {
		// background: white;
		.cate-head {
			display: flex;
			align-items: center;
			height: 154rpx;
			padding: 6rpx 32rpx 8rpx;
			background: #fff;
            margin: 10rpx 0;
			.label-wrap {
				flex: 1;
				display: flex;
				flex-direction: column;
				.title {
					font-size: 36rpx;
					color: #000;
					line-height: 1.3;
				}
				.desc {
					font-size: 26rpx;
					color: #909399;
				}
			}
		}
		.cate-content {
			padding: 20rpx;
            background: #fff;
			.scoll-wrapper {
				display: flex;
				align-items: flex-start;
				overflow: auto;
			}
			.items {
				width: 200rpx;
				margin-right: 20rpx;
				font-size: 28rpx;
				color: #303133;
				line-height: 1.8;
                padding: 0 10rpx;
                box-shadow: 0 0 1rpx 1rpx #f3f3f3;
				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 24rpx;
				}
				.title {
					color: #303133;
				}

				.clamp {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					display: block;
				}
				.price {
					color: #fa436a;
				}
			}
		}
	
	}
</style>